/**
 * 我的画像-年度盘点
 */
import { Col, Radio, Row, Spin, Steps, QueueAnim, Carousel } from "antd";
import { WeaLocaleProvider, WeaQrcode } from "ecCom";
import React from "react";
import { inject, observer } from 'mobx-react';
import YearInventoryView from './YearInventoryView'
import * as Util from "../../../util/Util";

const Step = Steps.Step;
const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;
const getUserLanguage = WeaLocaleProvider.getUserLanguage;

@inject('yearInventoryStore')
@observer
export default class YearInventory extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showIndex: 0,
            yearIndex: 0,
            mainid: '',
            userid: '',
            hasRight: true,
            imgFolder: '2019',
            ...props,

        };
        this.store = this.props.yearInventoryStore
        this.phoneView = null
    }

    componentWillMount() {
        const { userid } = this.props
        this.setState({ userid })
    }
    componentDidMount() {
        this.store.getYearInventoryList({ top: '4' })
        // this.store.getYearInventoryValue({ mainid: '', userid: this.state.userid })
    }
    componentWillReceiveProps(next) {
        if (next.userid != this.state.userid) {
            this.setState({ userid: next.userid, showIndex: -1 }, () => { this.setState({ showIndex: 0 }) })
            this.store.getYearInventoryValue({ mainid: '', userid: next.userid })
        }
        if (next.hasRight != this.state.hasRight) {
            this.setState({ hasRight: next.hasRight })
        }
    }


    getValueByIndex = (valueArr, index) => {
        if (valueArr && valueArr.length > 0) {
            for (var i = 0; i < valueArr.length; i++) {
                if (valueArr[i].prjid == index) {
                    return valueArr[i].value
                }
            }
        }
        return null
    }
    onRef = (ref) => {
        this.phoneView = ref
    }

    render() {
        let windowHeight = window.innerHeight - 140 - Util.getHeaderObjectHeight() + 'px'
        let { showIndex, yearIndex, hasRight, imgFolder } = this.state
        let { username, loading, scheduleData, wfData, messageData, docData, yearList } = this.store
        if (!hasRight) {
            return Util.renderAlertPage(
                "<span style='color:red'>" + getLabel(2012, '对不起，您暂时没有权限！') + "</span>",
                "",
                "30%",
                window.innerHeight - 140 - Util.getHeaderObjectHeight(),
                this.props.ecId || ''
            );
        }
        //计算手机屏幕大小
        let basicHeight = window.innerHeight - 140 - Util.getHeaderObjectHeight()
        let phoneHeight = basicHeight * 0.8
        let phoneWidth = phoneHeight * 0.5
        return (
            <div className="wea-wr-portrait-year-inventory-container">
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@31abxg`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ari846`} span={2}>
                        {/* 年度条 */}
                        <div style={{ height: windowHeight }}>
                            {yearList.length > 0 && <div className={"wea-wr-portrait-year-inventory-show-page-step"} style={{ height: windowHeight }}>
                                {yearList.map((y, i) => {
                                    return <div
                                        className={yearIndex == i ? "wea-wr-portrait-year-inventory-show-page-step-item-active" : "wea-wr-portrait-year-inventory-show-page-step-item"}
                                        style={{ marginTop: 100 * i + "px" }}
                                        onClick={() => {
                                            this.setState({ yearIndex: i, showIndex: -1 }, () => {
                                                this.setState({ showIndex: 0, mainid: y.id })
                                            })
                                            this.store.getYearInventoryValue({ mainid: y.id, userid: this.state.userid })
                                        }}
                                    >
                                        <span className={"wea-wr-portrait-year-inventory-show-page-step-item-text"}>{y.name}</span>
                                    </div>
                                })}
                            </div>}
                        </div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@h2xrmi`} span={22}>
                        {/* 预览画面 */}
                        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rjqb40`} spinning={loading}>
                            <div className="wea-wr-portrait-year-inventory-show-page" style={{ height: windowHeight, backgroundColor: 'white'   }}>
                                {yearList.length == 0 && <div className={"wea-wr-portrait-year-inventory-show-page-phone wea-wr-portrait-year-inventory-show-page-blank"} style={{ width: phoneWidth, height: phoneHeight }}>
                                    <img src={this.getImgUrl(imgFolder, 'shouji')} className={'wea-wr-portrait-year-inventory-show-page-phone-img'} />
                                    <span>请在后端生成年度盘点数据</span>
                                </div>}
                                {yearList.length > 0 && !loading && <div className={"wea-wr-portrait-year-inventory-show-page-phone"} style={{  borderRadius: "30px"}}>
                                    <img src={this.getImgUrl(imgFolder, 'shouji')} className={'wea-wr-portrait-year-inventory-show-page-phone-img'} />
                                    <YearInventoryView ecId={`${this && this.props && this.props.ecId || ''}_YearInventoryView@bsd03a`} onRef={this.onRef} viewHeight={phoneHeight} viewWidth={phoneHeight * 0.55} mainid={this.state.mainid} userid={this.state.userid}/>
                                </div>}

                                {/* 箭头 */}
                                {yearList.length > 0 && <div className={showIndex == 0 ? 'left-arrow' : 'left-arrow arrow-able'} onClick={() => {
                                    this.phoneView.prePage()
                                    let { showIndex } = this.state
                                    if (showIndex > 0) {
                                        showIndex--
                                        this.setState({ showIndex })
                                    }

                                }}>
                                    <i className="icon-coms-Left"></i>
                                </div>}
                                {yearList.length > 0 && <div className={showIndex == 8 ? 'right-arrow' : 'right-arrow arrow-able'} onClick={() => {
                                    this.phoneView.nextPage()
                                    let { showIndex } = this.state
                                    if (showIndex < 8) {
                                        showIndex++
                                        this.setState({ showIndex })
                                    }

                                }}>
                                    <i className="icon-coms-Right"></i>
                                </div>}
                                {/* qrcode */}
                                {/* <div style={{position:'absolute',right:'10px',bottom:'10px'}}>
                                    
                                    <WeaQrcode text={`http://192.168.3.25:8866/#/main/workrelate/portrait/yearInventoryView`} />
                                    <br />

                                    <p>扫描二维码，在移动端查看</p>
                                </div> */}
                            </div>
                        </Spin>
                    </Col>
                </Row>
            </div >
        );
    }

    buildDataPage = (index, headImg, mainImg, middleText, bottomText) => {
        let { showIndex } = this.state
        let { scheduleData } = this.store
        return <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@dihf0m`} delay={500} duration={1000} type="bottom" className={"wea-wr-portrait-year-inventory-show-page-item"} style={{ display: showIndex == index ? 'block' : 'none' }}>
            <div key={'headimg'} className={"wea-wr-portrait-year-inventory-show-page-item-head-img"}>
                <img
                    src={headImg}
                ></img>
            </div>
            <div key={'mainimg'} className={"wea-wr-portrait-year-inventory-show-page-item-main-img"}>
                <img
                    src={mainImg}
                ></img>
            </div>
            {
                middleText.map((m, i) => {
                    return <div key={"middle" + i} className={"wea-wr-portrait-year-inventory-show-page-item-keyword"}>
                        {m}
                    </div>
                })
            }
            {
                <div key={'bottom'} className={"wea-wr-portrait-year-inventory-show-page-item-bottom"} style={{ backgroundImage: `url(${this.getImgUrl(this.state.imgFolder, 'dbackgroup')})`, backgroundSize: "100% 100%" }}>
                    {bottomText.map((m, i) => {
                        return <div className="wea-wr-portrait-year-inventory-show-page-item-bottom-text">
                            {m}
                        </div>


                    })}
                </div>
            }
        </QueueAnim>
    }
    //获取图片地址
    getImgUrl = (folderName, imageName, suffix) => {
        return '/workrelate/images/yearInventory/' + folderName + '/' + imageName + "." + (suffix || 'png')
    }
}

